<template>
  <div>
    <p>欢迎来到广告列表页面~</p>
    <!-- 弹出框 -->
    <a-modal
      style="width:680px"
      alignCenter=true
      v-model:visible="visible"
      @cancel="handleCancel"
      :on-before-ok="handleBeforeOk"
      unmountOnClose
    >
      <template #title> 编辑广告 </template>

      <div>
        <a-space direction="vertical" :style="{ width: '100%' }">
          <a-upload
            action="/"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  file && file.status === 'error'
                    ? ' arco-upload-list-item-error'
                    : ''
                }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                      position: 'absolute',
                      left: '50%',
                      top: '50%',
                      transform: 'translateX(-50%) translateY(-50%)',
                    }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-space>
        <a-form
          :model="form"
          :style="{ width: '600px' }"
          @submit="handleSubmit"
        >
          <a-form-item
            field="name"
            tooltip="Please enter username"
            label="发布人："
          >
            <a-input v-model="form.name" placeholder="请输入发布人的姓名..." />
          </a-form-item>
          <a-form-item field="post" label="发布时间：">
            <a-input v-model="form.post" placeholder="请输入发布人的时间..." />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-row class="grid-demo" :gutter="24" v-for="item in adList" :key="item.id">
      <a-col :span="5">
        <div
          ><img
            :src="item.imgurl"
            alt=""
            :style="{ width: '100px', height: '100px' }"
        /></div>
      </a-col>
      <a-col :span="7">
        <div>发布人:{{ item.publisher }}</div>
      </a-col>
      <a-col :span="7">
        <div>发布时间:{{ item.time }}</div>
      </a-col>
      <a-col :span="2">
        <div
          ><a-button
            type="primary"
            :data-id="item.id"
            @click="clickEdit"
            size="mini"
            >编辑</a-button
          ></div
        >
      </a-col>
      <a-col :span="2">
        <div
          ><a-button size="mini" type="primary" @click="clickDelete"
            >删除</a-button
          ></div
        >
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: 'adListView',
  data() {
    return {
      form: {
        name: '',
        post: '',
        isRead: false,
      },
      adList: [
        {
          id: 1,
          imgurl:
            'https://img.zcool.cn/community/0178e55b54678ba80121ade0244213.jpg@1280w_1l_2o_100sh.jpg',
          publisher: '小白',
          time: '2021-6-2',
        },
        {
          id: 2,
          imgurl:
            'https://img.zcool.cn/community/0150125a44955da8012197412b46ae.jpg@1280w_1l_2o_100sh.jpg',
          publisher: '小红',
          time: '2022-3-5',
        },
        {
          id: 3,
          imgurl:
            'https://img.zcool.cn/community/01f0bb5b2b2875a8012034f747b605.jpg@3000w_1l_0o_100sh.jpg',
          publisher: '小青',
          time: '2022-4-8',
        },
        {
          id: 4,
          imgurl:
            'https://img.zcool.cn/community/01b025554482a30000019ae9ab6d10.jpg@1280w_1l_2o_100sh.jpg',
          publisher: '李四',
          time: '2022-12-29',
        },
        {
          id: 5,
          imgurl:
            'https://img.zcool.cn/community/01c6525cf73738a801213ec29955f8.jpg@1280w_1l_2o_100sh.jpg',
          publisher: '张三',
          time: '2019-5-21',
        },
      ],
      visible: false,
    };
  },
  methods: {
    //编辑
    clickEdit() {
      this.visible = true;
    },
    //删除
    clickDelete(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped>
.grid-demo .arco-col {
  height: 164px;
  font-size: 14px;
  color: black;
  margin-bottom: 20px;
}
.grid-demo .arco-col > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
 .arco-modal-simple {
  width: 680px !important;
}
.arco-space :deep() .arco-upload {
  margin-left: 250px;
  margin-bottom: 50px;
}
.arco-space-item {
  margin-left: 200px;
} 
</style>

